// Import your custom theme
@import '../../theme.scss';

.deployment-details__header {
  width: 100%;
  max-width: $layout-max-width;
  margin: auto;
  padding: 2em;
  h1 {
    margin: 0;
  }
  a {
    display: flex;
    align-items: center ;
  }
}

.deployment-details {
  width: 100%;
  max-width: $layout-max-width;
  margin: auto;
  padding: 0 2em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;


  &__main {
    padding-bottom: 2em;
    &__notes {
      margin: 2em 0;

      pre {
        padding: 1em;
        margin-bottom: 0;
        background-color: $layout-light;
        white-space: pre-wrap;       /* css-3 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-break: break-all;
      }
    }
  }

  &__title {
    padding-bottom: .3em;
    margin: 0;
    border-bottom: 1px solid $layout-light;
  }

  &__info {

    &__container {
      background: $background-light;
      border: 1px solid $border-color;
      border-radius: $border-radius;
      margin-bottom: 1em;
      overflow: hidden;
      &.actions {
        padding: 1em;
        margin-top: 2em;
        h3 {
          margin-top: 0;
          margin-bottom: .5em;
        }
      }
    }

    &__icon {
      height: 100px;
      background: $background-white;
      border-bottom: 1px solid $border-color;
      display: flex;
      img {
        width: auto;
        height: auto;
        max-height: 60%;
        max-width: 80%;
        margin: auto;
      }
    }

    &__list {
      padding: 1em;
      &__item {
        margin-bottom: 1em;
        p {
          margin: 0;
          font-size: 0.7em;
        }
        h4 {
          margin: 0;
        }
      }
    }

  }


  @include mappy-bp(medium) {
    flex-direction: row;
    flex-wrap: nowrap;

    &__main {
      padding-left: 3em;
    }

    &__info {
      width: 30%;
      max-width: 250px;
    }

    &__main {
      min-width: 0;
      flex: 3;

      &__notes {
        margin-bottom: 0;
      }
    }
  }
}
